import TyOverlayex from './TyOverlayex'
import $ from 'jquery'

class TyLabel extends TyOverlayex {
  constructor(content, labelOptions) {
    super(labelOptions)
    this.id = 'label_' + labelOptions.id
    this.content = content// 可以是html
    this.offset = labelOptions.offset || [12, 2]
    this.position = labelOptions.position
    this.style = labelOptions.style || {}/* backgroundColor,fontSize,fontName ,color, */
    this.container = labelOptions.container
    this.positioning = labelOptions.positioning ? labelOptions.positioning : 'top-left'
  }

  createHtmlElement() {
    const createDom = (html) => {
      const dom = $(html).appendTo($('body'))
      return dom[0]
    }
    if (!this.container) {
      const html = this.getInnerHtml()
      this.container = createDom(html)
    }
    return this.container
  }

  getInnerHtml() {
    if (!this.container) {
      const html = '<label class="Ol_Label"  ' +
        'style="position: absolute; ' +
        '-moz-user-select: none; ' +
        'display: inline; ' +
        'cursor: pointer;  ' +
        'border: 1px solid ' + (this.style.color || '#06c') + ';' +
        'padding: 5px 20px 5px 30px; ' +
        'white-space: nowrap; ' +
        'border-radius: 20px; ' +
        'z-index: 80;' +
        'font:' + this.style.fontSize + '  ' + this.style.fontName + ',simsun,sans-serif;' +
        'color: ' + (this.style.color || '#06c') + '; ' +
        'left: ' + this.offset[0] + 'px; ' +
        'top: ' + this.offset[1] + 'px; ' +
        'background-color: ' + (this.style.backgroundColor || 'white') + ';">' +
        this.content + '</label>'
      return html
    } else {
      return this.container.innerHtml
    }
  }
}

export default TyLabel
